<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>欢迎来到王者荣耀</title>
        <style>
            *{margin: 0;padding:0;box-sizing: border-box}
            .container{
                width: 1200px;
                margin: 50px auto; 
            }
            hr{
                margin: 15px 0;
            }

            .hero-list {
                margin: 0 -10px;
                overflow: hidden;
            }

            .hero-list .item{
                width: 10%;
                float:left;
                padding: 0 10px;
            }
            .item img{
                width: 100%;
            }

            .item p{
                text-align: center;
                padding-bottom: 5px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <h2>欢迎来到王者荣耀</h2>
            <hr />
            <div class="hero-list">
                <!-- <div class="item">
                    <img src="http://cdn.xiaohigh.com/images/heros/538.jpg" alt="">
                    <p>云樱</p>
                </div> -->
            </div>
        </div>

        <script>
            // GET  http://api.xiaohigh.com/heros
            //获取 heroList
            let heroList = document.querySelector('.hero-list');
            //创建请求对象
            let xhr = new XMLHttpRequest();
            //初始化
            xhr.open('get', 'http://api.xiaohigh.com/heros');
            //发送
            xhr.send();
            //获取结果
            xhr.onreadystatechange = function(){
                //判断
                if(xhr.readyState === 4){
                    // console.log(xhr.response, typeof xhr.response);
                    // JSON 转 JS 对象
                    let data = JSON.parse(xhr.response);
                    //遍历数组
                    data.forEach(item => {
                        //创建结构
                        let div = document.createElement('div');
                        div.className = 'item';
                        //创建 img
                        let img = document.createElement('img');
                        img.src = 'http://cdn.xiaohigh.com' + item.image; 
                        //创建 p 元素
                        let p = document.createElement('p');
                        //设置 文本
                        p.innerHTML = item.name;
                        //插入元素
                        div.appendChild(img);
                        div.appendChild(p);
                        //
                        heroList.appendChild(div);
                    })
                }
            }
        </script>
    </body>
</html>
